import React, { memo } from 'react'
import styles from './index.module.css'

import { NavLink, useNavigate } from 'react-router-dom'

import { leftLinks } from 'service/local-data'

import { 
  // UserOutlined, 
  UploadOutlined } from '@ant-design/icons';
const exitItems = [
  // {id: 1, type: 'account', icon: <UserOutlined style={{ fontSize: '16px'}} />, title: '账号信息'},
  {id: 2, type: 'exit', icon: <UploadOutlined style={{ fontSize: '16px'}} rotate={90}/>, title: '退出登录'},
]
const Frame = memo((props) => {
  let navigate = useNavigate()
  
  const handleEdit = (type) => {
    console.log(type);
    if (type === 'account') {
      navigate('/layout/user/1')
    }else if (type === 'exit') {
      // localStorage.removeItem('userToken')
      // localStorage.removeItem('userInfo')
      // localStorage.removeItem('account_status')
      // localStorage.removeItem('login_password')
      navigate('/login', {replace: true})
    }
    
  }

  return (
    <div className={styles.container}>
      <div className={styles.container_top}>
        <div className={styles.container_top_left}></div>
        <div className={styles.container_top_right}>
          <div className={styles.user_info}>
            <div className={styles.avatar}>
              <img referrerPolicy="no-referrer" alt='' src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng99b690fadbb67c9ebba3fcc8631ddfd505ea78fb510b74cdb483a7062d527995" />
            </div>
            <div className={styles.username}>管理员</div>
          </div>
          <div className={styles.edit_user_info_wrap}>
            <div className={styles.edit_user_info}>
              {
                exitItems.map(item => {
                  return (
                    <div key={item.id} className={styles.edit_user_info_item} onClick={() => {handleEdit(item.type)}}>
                      {item.icon}
                      <span>{item.title}</span>
                    </div>
                  )
                })
              }
            </div>
          </div>
        </div>
      </div>
      <div className={styles.container_bottom}>
        <div className={styles.container_bottom_left}>
          {
            leftLinks.map(link => {
              return (
                <NavLink
                  key={link.link}
                  to={link.link}
                  className={({ isActive, isPending }) =>
                    isPending ? styles.navlink_pending : isActive ? styles.navlink_active : ""
                  }
                >
                  {
                    ({ isActive }) => {
                      return (
                        <div className={styles.link_wrap}>
                          <div className={styles.link_icon}>
                            <img src={isActive ? link.icon : link.activeIcon} alt="" />
                          </div>
                          <div className={styles.link_title}>{link.title}</div>
                        </div>
                      )
                    }
                  }
                </NavLink>
              )
            })
          }
        </div>
        <div className={styles.container_bottom_right}>
          {props.children}
        </div>
      </div>
    </div>
  )
})

export default Frame